<template>
	<view>
		<!-- 头部搜索框开始 -->
		<UsersSearch></UsersSearch>
		<!-- 头部搜索框结束 -->

		<!-- tab导航栏开始 -->
		<Tab :tabBars="tabBars" @changeColor="changeTabColor" :tabIndex="tabIndex"></Tab>
		<!-- tab导航栏结束 -->
		<!-- 互关开始 -->
		<block v-if="tabIndex === tabBars[0].id">
			<view v-for="(item,index) in list" :key="index">
				<UserList :item="item"></UserList>
			</view>
		</block>
		<!-- 互关结束 -->
		<block v-else-if="tabIndex === tabBars[1].id">1</block>
		<block v-else>2</block>
	</view>
</template>

<script>
import UsersSearch from '@/components/users/users-search/users-search';
import Tabs from '@/components/tabs/tabs';
import Tab from '@/components/tabTwo.vue';
import UserList from '@/components/common/user-list/user-list'
export default {
	components: {
		UsersSearch,
		Tab,
		UserList
	},
	data() {
		return {
			tabIndex: 0,
			tabBars: [
				{
					name: '互关',
					id: 0,
					isShow: true,
					num: 14
				},
				{
					name: '关注',
					id: 1,
					isShow: false,
					num: 10
				},
				{
					name: '粉丝',
					id: 2,
					isShow: false,
					num: 12
				}
			],
			list: [
				{
					userpic: '../../../static/demo/userpic/11.jpg',
					username: '昵称',
					age: 20,
					sex: 0,
					isguanzhu: true
				},
				{
					userpic: '../../../static/demo/userpic/11.jpg',
					username: '昵称',
					age: 21,
					sex: 1,
					isguanzhu: false
				},
				{
					userpic: '../../../static/demo/userpic/11.jpg',
					username: '昵称',
					age: 20,
					sex: 0,
					isguanzhu: true
				},
				{
					userpic: '../../../static/demo/userpic/11.jpg',
					username: '昵称',
					age: 21,
					sex: 1,
					isguanzhu: false
				},
				{
					userpic: '../../../static/demo/userpic/11.jpg',
					username: '昵称',
					age: 20,
					sex: 0,
					isguanzhu: true
				},
				{
					userpic: '../../../static/demo/userpic/11.jpg',
					username: '昵称',
					age: 21,
					sex: 1,
					isguanzhu: false
				},
				{
					userpic: '../../../static/demo/userpic/11.jpg',
					username: '昵称',
					age: 20,
					sex: 0,
					isguanzhu: true
				},
				{
					userpic: '../../../static/demo/userpic/11.jpg',
					username: '昵称',
					age: 21,
					sex: 1,
					isguanzhu: false
				}
			]
		};
	},
	methods: {
		// 切换顶部tab点击颜色
		changeTabColor(index) {
			this.tabIndex = index;
		}
	}
};
</script>

<style lang="less" scoped>

</style>
